<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>p3_固定定位技巧1</title>
        <style>
            .top{
                background-color: #5aa4ae;
                height: 120px;
                font-size: 40px;
                color: #fff;
                font-weight: bold;
                position: fixed;/*固定定位 脱离文档流 不能使用爸爸的宽度 */
                top: 0;
                /*100vw 100%的视口宽度 viewport width*/
                /*100vh 100%的视口高度 viewport height*/
                width: 100vw;/* 视口宽度的100% */
            }
            .main {
                margin-top: 130px;
            }
            /*选中左侧或右侧*/
            .left,.right{
                width: 60px;
                height: 220px;
                position: fixed;/*固定定位 脱离文档流*/
                top: 300px;
            }
            /*设置左侧的颜色*/
            .left{
                background-color: #fff799;
                left: 20px;
            }
            .right{
                background-color: #f35336;
                right: 20px;
            }
        </style>

    </head>
    <body>
        <div class="top">我是顶部的广告条</div>
        <div class="left">我是左侧的广告条</div>
        <div class="right">我是右侧的广告条</div>
        <div class="main">
            我是内容
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores aspernatur cum earum
                ex nemo odio optio perspiciatis reiciendis. Aliquam delectus deserunt distinctio ducimus ipsam optio
                praesentium temporibus vero.
            </div>
            <div>Earum facilis iusto nisi pariatur possimus quia repudiandae voluptates. Atque harum libero molestias
                quia quod! Amet architecto cumque fugit necessitatibus repudiandae voluptatem! Dolor, dolore dolores
                labore mollitia quaerat vitae voluptatem?
            </div>
            <div>Dolorum incidunt necessitatibus officiis possimus ratione? Accusamus aliquam animi assumenda corporis
                cum dolore doloremque eaque error et exercitationem, facilis ipsum iste laudantium maiores odit, quae
                reprehenderit similique, temporibus unde veniam.
            </div>
            <div>A ducimus esse id maxime modi nobis, placeat similique tenetur. Harum, nostrum, sit. Alias ducimus
                harum ipsum? Alias aliquid est laudantium maxime mollitia nobis praesentium quia quis ratione velit,
                voluptatibus!
            </div>
            <div>Accusamus ad adipisci aliquid asperiores consequuntur corporis deserunt eos eveniet in incidunt
                molestiae, molestias mollitia neque nostrum nulla officia qui quia quos ratione reiciendis sed
                similique, velit vero voluptatem voluptatum!
            </div>
            <div>Distinctio error in iste laudantium placeat quas sunt voluptate! Eveniet, inventore nam nobis obcaecati
                ratione sunt voluptates? Architecto culpa, iure laboriosam numquam officia quaerat reprehenderit ut vel
                voluptas? Harum, iusto.
            </div>
            <div>Nesciunt repellat ullam velit! Ab accusantium aperiam consequuntur, cupiditate doloremque esse facilis
                id nam nemo veniam. Autem commodi cupiditate earum eum facere fugiat ipsum obcaecati quasi, reiciendis
                repudiandae velit vero?
            </div>
            <div>Accusamus aliquam assumenda, beatae consequuntur delectus distinctio error illum impedit ipsam
                molestias nam nobis non odio odit officia omnis optio possimus praesentium quam reprehenderit similique
                sit tempore, voluptate voluptatem voluptatum.
            </div>
            <div>Amet, cum enim iusto nemo nihil quae, quisquam quod sed similique tempore vitae voluptatibus. Adipisci
                eaque in officiis quia vitae. Debitis esse et eum libero molestiae nisi officia sunt voluptatibus.
            </div>
            <div>Dignissimos doloremque quaerat repudiandae velit? Cumque deserunt error in ipsum iste modi molestiae
                nesciunt porro sequi tempore. Accusantium ad animi beatae facere, id, iste, maiores nesciunt
                perspiciatis soluta veritatis voluptatibus!
            </div>
            <div>Blanditiis modi vero voluptas! Accusantium adipisci beatae cumque distinctio dolor dolore doloremque
                dolores dolorum, fuga hic iusto labore laboriosam magni molestiae, nam nesciunt nisi praesentium quae
                quam quisquam repudiandae totam?
            </div>
            <div>At autem consequuntur earum eligendi enim eos harum iusto maiores modi nobis nostrum numquam obcaecati
                possimus quaerat quasi quidem, quos ratione sed, sit tenetur ullam unde veritatis vitae voluptate
                voluptates?
            </div>
            <div>Aperiam architecto consequatur, corporis dolore fuga iste modi, nam odio quia quisquam repellat sed!
                Animi, autem consequuntur, doloremque ducimus eum facilis fuga in ipsam ipsum minima necessitatibus sint
                soluta suscipit!
            </div>
            <div>Consequuntur debitis eveniet, fuga iusto quos repudiandae saepe? Accusamus adipisci aliquam architecto
                beatae culpa delectus earum magni maiores nemo, nisi officia quaerat qui quod sequi similique sint ut
                voluptate voluptatem!
            </div>
            <div>Accusantium ad animi aperiam consectetur corporis doloremque, ducimus ex, inventore ipsum itaque nobis
                numquam officiis optio perspiciatis, quo repellat repudiandae. Alias asperiores neque quisquam. Atque
                dolore illum officia rem similique?
            </div>
            <div>Adipisci alias asperiores consequuntur culpa eaque facere fuga fugiat laborum, maiores maxime molestias
                mollitia neque nihil obcaecati odio omnis perspiciatis quae, quisquam quo repudiandae rerum sed
                similique sunt tenetur vero.
            </div>
            <div>Cum, modi nesciunt officiis quaerat soluta tempora unde. Accusantium architecto asperiores blanditiis
                consectetur cupiditate ducimus ea enim facere fugit, maiores nihil nobis provident quisquam, quod, sit
                sunt tempora vel voluptatibus.
            </div>
            <div>Amet commodi praesentium quasi rerum suscipit. Eos, id ipsum molestias placeat quasi ullam voluptatum.
                Aspernatur ipsa libero nam natus odio praesentium quidem voluptatem. Iure maxime quidem quisquam saepe
                tenetur voluptatem.
            </div>
            <div>Accusantium aliquid atque, aut corporis cum dignissimos dolore doloribus dolorum eius est eum facere
                incidunt ipsa iure iusto nam necessitatibus neque nobis non odit omnis quas qui quos similique sit!
            </div>
            <div>A assumenda autem beatae consequuntur, enim facilis ipsa minus nemo omnis optio quaerat quos repellat
                sed vel voluptatum. Aliquam corporis dolor doloribus dolorum in magnam minima quasi rerum vel vero.
            </div>
            <div>Accusantium consequuntur dolorem doloremque, et expedita id inventore iste necessitatibus nostrum
                placeat porro saepe ut voluptas. A accusamus aliquam architecto doloribus expedita maxime minima, minus
                natus, nostrum obcaecati soluta vitae?
            </div>
            <div>Accusantium aliquam, animi aperiam assumenda corporis dolorem eligendi esse, facere id illum impedit
                incidunt ipsa nemo odit porro quae qui quod sint sit tempore ullam velit vero vitae voluptate
                voluptatem!
            </div>
            <div>Amet atque consectetur consequuntur dolores excepturi ipsam ipsum, iste maiores molestiae nemo nostrum
                officia quaerat quas quisquam sunt temporibus velit? Laborum, nisi, sed. Cupiditate dolor et omnis
                reiciendis repellendus temporibus.
            </div>
            <div>Accusamus ducimus facilis porro velit voluptatem. Cupiditate distinctio eligendi excepturi fugiat
                laboriosam reprehenderit rerum sed. Accusamus cum doloribus earum enim ex illo nihil nisi omnis rem
                repellat, sequi sunt totam.
            </div>
            <div>Adipisci animi architecto, assumenda, aut culpa earum illo perferendis quam, quidem ratione sapiente
                sit ullam? Blanditiis eveniet fugiat ipsa ipsum iusto necessitatibus nesciunt nihil pariatur quaerat
                repellendus, totam ullam veniam?
            </div>
            <div>Eos esse fugiat minima nulla sit tenetur! Dolorem enim eveniet explicabo fugiat hic, iusto molestiae
                mollitia odit porro provident reprehenderit vero vitae voluptatibus? Cumque ipsum, magnam natus officiis
                quas quisquam?
            </div>
            <div>Alias amet asperiores assumenda blanditiis consectetur eius hic nulla perferendis porro veritatis?
                Architecto beatae dolore doloremque eaque et harum labore similique soluta tempore tenetur! Amet
                consequuntur ipsum nam quidem reiciendis!
            </div>
            <div>Ab, accusamus animi aperiam asperiores ea ex, facilis, id impedit incidunt libero minus necessitatibus
                nemo obcaecati placeat sequi soluta voluptatum. Aspernatur commodi error expedita, nobis obcaecati odio
                rem tenetur totam.
            </div>
            <div>Amet autem, commodi consequatur dolorem et fugit modi molestiae natus necessitatibus nemo nesciunt
                optio porro quaerat quidem quis sint sit suscipit tenetur, totam ut! Ad aliquid molestiae quas qui
                voluptatem!
            </div>
            <div>Accusantium assumenda commodi corporis cupiditate eligendi, facilis fuga, illum incidunt iste iure
                magni minima odio vitae. At cum debitis delectus ducimus et, facilis modi nam neque perspiciatis placeat
                provident voluptates.
            </div>
            <div>Amet consequuntur culpa debitis dicta fugit id illo illum incidunt ipsa, magnam maxime nam officia
                omnis quaerat quis quod reiciendis repudiandae sed sint suscipit tenetur unde veritatis? Ipsam, porro,
                quaerat!
            </div>
            <div>Autem blanditiis cupiditate eaque, earum, eius est facere fugit hic inventore ipsa ipsum maxime neque
                nihil nostrum omnis praesentium quasi qui quibusdam quisquam suscipit. Adipisci consequuntur deserunt
                excepturi quasi quod.
            </div>
            <div>Cum ea esse illum maxime nam. Accusantium alias blanditiis cum debitis delectus distinctio eaque earum,
                eos laboriosam magni maiores neque nisi non omnis possimus praesentium quam rerum totam voluptas
                voluptates!
            </div>
            <div>A commodi ipsum numquam veritatis! Ab ad asperiores dolor fugit laboriosam necessitatibus odit?
                Asperiores consectetur corporis dolorem, est harum, illo, illum itaque maxime nisi repellendus sint unde
                voluptates. Itaque, repellat.
            </div>
            <div>Ducimus porro, veritatis? Adipisci at consequatur cum delectus deleniti dolore ducimus earum fuga iste
                labore libero magnam, nulla odit placeat porro quia quibusdam quo repellendus reprehenderit repudiandae
                sapiente sit suscipit.
            </div>
            <div>Ad alias, aspernatur aut dolorum, eius error esse expedita explicabo facere fuga harum ipsum magni
                nihil nisi odio odit, pariatur quia sed temporibus voluptas? Dolor quae quaerat quisquam ut vel?
            </div>
            <div>Culpa, eveniet reprehenderit. Aliquid animi, architecto consequatur dolorum enim error est eveniet ex
                excepturi fugit laboriosam minus, modi odit placeat praesentium sint ullam, voluptate. At aut cupiditate
                fugiat iusto quas?
            </div>
            <div>Dolorem eum iste natus pariatur ullam? Adipisci asperiores aut autem dignissimos et laborum molestiae
                mollitia, nam nemo, perspiciatis porro ratione rem sed sint, ullam. Ad alias doloribus itaque magnam
                sequi?
            </div>
            <div>Ab accusantium cumque dolor earum explicabo, id inventore nihil placeat voluptatibus. Autem eveniet ex
                id in ipsa magni molestiae mollitia neque obcaecati praesentium, quod quos reiciendis repudiandae
                similique sit tempora.
            </div>
            <div>Ab, aliquid aut consequatur cupiditate deleniti deserunt dicta dolor dolores enim excepturi illum
                itaque laboriosam molestias mollitia nihil odio odit, officiis perspiciatis quisquam reiciendis rem
                repellendus sit tempora ut voluptate!
            </div>
            <div>Aspernatur assumenda ducimus exercitationem facilis libero quis quo ullam veniam voluptatem
                voluptatibus. Commodi culpa, neque omnis possimus quis quisquam velit. Ad corporis dolorem eum,
                laudantium nihil repellendus reprehenderit sequi veritatis?
            </div>
            <div>Aperiam autem eligendi facere fugiat harum id iusto nobis odio odit qui quidem, ratione repellendus
                repudiandae sequi similique sunt tempora ut velit voluptas voluptatibus? Consequatur dolore labore
                suscipit temporibus velit?
            </div>
            <div>Adipisci aliquid enim, eveniet incidunt iure iusto libero magni nisi obcaecati officia optio placeat
                quae similique unde vero. Architecto enim impedit itaque nesciunt officiis optio rem temporibus unde
                vero voluptatibus?
            </div>
            <div>Aperiam illum, maxime nisi non quod rem sequi suscipit voluptatem. Aut blanditiis consequuntur debitis
                deserunt ducimus enim eveniet harum illo impedit incidunt nulla quam, reprehenderit repudiandae
                similique vel voluptatem voluptatum.
            </div>
            <div>Autem blanditiis deserunt, enim iusto libero minus omnis quasi quos rerum soluta tempora totam vel
                veritatis. Odio perferendis tenetur voluptate! Corporis cupiditate doloribus in molestiae obcaecati,
                quibusdam ratione tempora ut.
            </div>
            <div>Architecto dicta excepturi in laborum possimus quae quam quibusdam soluta tempore voluptate? Ab ad
                animi asperiores commodi, corporis esse eveniet exercitationem laboriosam libero maxime modi nemo odit
                recusandae repellendus voluptatum.
            </div>
            <div>Amet assumenda aut, cupiditate debitis delectus est ex exercitationem, explicabo facilis id in iusto
                nam natus non porro quaerat quasi quibusdam reiciendis repudiandae soluta tenetur totam voluptas. In,
                quaerat, quos.
            </div>
            <div>Accusamus cumque deserunt ex maxime nisi nulla quidem sequi, voluptatem. Doloremque nostrum possimus
                repellat velit voluptate. Aliquam atque exercitationem harum, laudantium magnam molestias nisi
                praesentium provident, quos sed tenetur, unde.
            </div>
            <div>Ab autem blanditiis consequatur, corporis debitis dolor doloremque earum eveniet facere harum ipsam
                iure iusto modi nam nesciunt nobis odio officiis perspiciatis porro quas ratione sit tempora voluptatum!
                Obcaecati, quibusdam.
            </div>
            <div>Amet beatae dicta, exercitationem illum in minus, nam nemo non nulla pariatur perspiciatis placeat quod
                reprehenderit veniam voluptatem! A et fuga hic impedit optio quod quos repudiandae soluta! Expedita,
                reprehenderit!
            </div>
        </div>
    </body>
</html>